<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<div id="target"></div>

<script>
var values = [
  {input: "0px", expected: "0px"},
  {input: "0px 0px", expected: "0px"},
  {input: "10px 0px", expected: "10px 0px"},
  {input: "0px 10px", expected: "0px 10px"},
  {input: "10px", expected: "10px"}
];

test(function() {
  for (let {input, expected} of values) {
    target.style.borderTopLeftRadius = input;
    target.style.borderBottomRightRadius = input;
    target.style.borderTopRightRadius = input;
    target.style.borderBottomLeftRadius = input;

    assert_equals(getComputedStyle(target).borderTopLeftRadius, expected);
    assert_equals(getComputedStyle(target).borderBottomRightRadius, expected);
    assert_equals(getComputedStyle(target).borderTopRightRadius, expected);
    assert_equals(getComputedStyle(target).borderBottomLeftRadius, expected);
  }
}, "Test that computed style for border-*-radius doesn't serialize as '0px' when one dimension is 0px and the other isn't");
</script>
